<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="直播中心" back></Header>
		<view class="wapper">
			<view class="content">
				<template v-if="contents.length > 0">
					<view class="content-item" v-for="(v,k) in contents" :key="k" @click="toDetail(v)">
						<view class="top">
							<image :src="getUrl(v.ImageUrl)" mode="widthFix"></image>
						</view>
						<view class="bottom">
							<view class="bottom-title">
								<div class="item">

									{{v.ZhiBoName}}
								</div>
								<div class="time">

									{{v.BeginTime}}
								</div>
							</view>
							<view class="bottom-date" :style="{backgroundColor:v.is_yuyue?'#0d0cd4':'#d10a0c'}" @click.stop="yuyue(v)">
								{{getYuyue(v.is_yuyue)}}
							</view>
						</view>
					</view>
				</template>
				<u-empty v-else descript="暂无数据" style="margin: 0 auto;"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				searchParams: {
					pagesize: 9899,
					pageindex: 1,
					OpenID:''
				},
				contents: [],
				total: 0,
				status: 0,
				user:''
			}
		},
		methods: {
			async search() {
				let res = await this.$api.getNavs8(this.searchParams)
				this.contents = res.UserData
			},
			toDetail(v) {
				window.open(v.LinkUrl)
			},
			getYuyue(v){
				switch(v){
					case 0:
						return '预约'
					case 1:
						return '已预约'
				}
			},
			async yuyue(v){
				let res = await this.$api.yuyue({
					OpenID:this.user.OpenID,
					ZhoBoID:v.ZhiBoID
				})
				this.search()
			}
		},
		async onReachBottom() {
			if (this.total > this.contents.length) {
				this.status = 1
				this.searchParams.pageindex++
				await this.search()
				this.status = 0
			} else {
				this.status = 2
			}
		},
		async onPullDownRefresh() {
			this.searchParams.pageindex = 1
			await this.search()
			uni.stopPullDownRefresh()
		},
		async mounted() {
			this.user = uni.getStorageSync('user')
			this.searchParams.OpenID = this.user.OpenID
			this.search()
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			padding: 20rpx;
			z-index: 100;
			margin-top: -280rpx;

			// overflow: auto;
			.content {
				height: 100%;
				overflow: auto;
				padding: 20rpx;

				.content-item {
					margin-bottom: 30rpx;
					width: 100%;
					border-radius: 20rpx;
					overflow: hidden;
					background: #fff;

					.top {
						image {
							width: 100%;
							height: 300rpx;
						}
					}

					.bottom {
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.bottom-title {
							font-size: 24rpx;
							flex: 1;
							margin-right: 20rpx;
							.item{
								// font-s;
							}
							.time{
								color: #929292;
							}
						}

						.bottom-date {
							width: 80rpx;
							text-align: center;
							font-size: 24rpx;
							padding: 20rpx 40rpx;
							border-radius: 10rpx;
							color:#fff;
						}
					}
				}
			}
		}
	}
</style>